var avatar = "anon.png";
var avatarName;
var playerName = "Guest";
var engine = new Engine();

/* Design */

function showValue(newValue) {
	document.getElementById("insert").value = newValue;
}

/* Options menu functions */

$(document).ready(function() {
	// Submitting Avatar info
	$('#submitInfo').mousedown(function() {
		playerName = $('#nameInput').val();
		if(playerName != "Insert Your Nickname" && playerName != "" && avatarName != ""){
			$('#pickAvatarContainer').fadeOut('normal');
			$('#infoSumbitError').text("");
		}else{
			$('#infoSumbitError').text("Fill all the fields!").css("color","white");
		}
	});

	// Avatar pick screen
	$('#pickYourAvatar').mousedown(function() {
		$('#pickAvatarContainer').css("visibility","visible").fadeIn('normal');
	});

	// When player wants to input his name, mouse click clears the field
	$('#nameInput').mousedown(function() {
		$('#nameInput').val("");
	});

	// Starts a game, removes divs, adds avatar picture and name
	$('#startGame').mousedown(function() {
		$('#joiningPanelContainer').fadeOut('normal');
		$('#offline').fadeOut('normal');
		$("#" + avatarName).css("border-color","black");
		$('#nameInput').val("Insert Your Nickname");

		setupTable();

		engine = new Engine();
		engine.startGame(playerName, avatar);
	});

	$('#leaveGame').mousedown(function() {
		window.location.href = 'index.html';
	});

	$('#leaveTable').mousedown(function() {
		engine.leaveGame();
		clearTable();

		$('#chatArea').val("");
		avatar = "anon.png";
		playerName = "Guest";
		$('#joiningPanelContainer').fadeIn('normal');
		$('#offline').fadeIn('normal');
	});

	$('#fold').mousedown(function () {
		engine.fold();
	});

	$('#checkCall').mousedown(function() {
		engine.call();
	});

	$('#betRaise').mousedown(function() {
		engine.raise();
	});
});

// Selecting data
function selectAvatar(avatarId) {
    if(avatarName != ""){
        $("#" + avatarName).css("border-color","black");
    }
    $("#" + avatarId).css("border-color","white");
    avatarName = avatarId;
    avatar = avatarName + ".jpg";
}

function setPlayer(id, player) {
	var playerCoord = [{top: "10px", left: "195px"},
	                   {top: "10px", left: "375px"},
	                   {top: "10px", left: "555px"},
	                   {top: "10px", left: "735px"},
	                   {top: "225px", left: "890px"},
	                   {top: "455px", left: "675px"},
	                   {top: "455px", left: "450px"},
	                   {top: "455px", left: "225px"},
	                   {top: "225px", left: "35px"}];
	
	var cardCoord = [{top: "155px", left: "195px"},
	  	             {top: "155px", left: "375px"},
	  	             {top: "155px", left: "555px"},
	  	             {top: "155px", left: "735px"},
	  	             {top: "260px", left: "780px"},
	  	             {top: "385px", left: "675px"},
	  	             {top: "385px", left: "450px"},
	  	             {top: "385px", left: "225px"},
	  	             {top: "260px", left: "145px"}];
	
	var dealCoord = [{top: "135px", left: "155px"},
	  	             {top: "135px", left: "335px"},
	  	             {top: "135px", left: "515px"},
	  	             {top: "135px", left: "695px"},
	  	             {top: "185px", left: "870px"},
	  	             {top: "435px", left: "785px"},
	  	             {top: "435px", left: "560px"},
	  	             {top: "435px", left: "335px"},
	  	             {top: "375px", left: "125px"}];
	
	var betCoord = [{top: "210px", left: "210px"},
	                {top: "210px", left: "390px"},
	                {top: "210px", left: "570px"},
	                {top: "210px", left: "720px"},
	                {top: "270px", left: "720px"},
	                {top: "355px", left: "690px"},
	                {top: "355px", left: "460px"},
	                {top: "355px", left: "240px"},
	                {top: "270px", left: "230px"}];
	
	$("#gameTable").append(
			"<div id='player" + id + "' class='player'>" +
				"<div class='playerImage'></div>" +
				"<div class='playerName'></div>" +
				"<div class='playerMoney'>" +
					"<img src='resources/cash.png' style='float: left' />" +
					"<span class='sum'></span>" +
				"</div>" +
			"</div>" +
			"<div id='playerCards" + id + "' class='playerCards'></div>" +
			"<div id='dealer" + id + "' class='dealer'></div>" +
			"<div id='player_" + id + "_Bet' class='bet'></div>");
	
	$("#player" + id).css("top", "" + playerCoord[id].top);
	$("#player" + id).css("left", "" + playerCoord[id].left);
	$("div#player" + id + " .playerImage").html("<img style='width: 100px;height: 97px;' src='resources/avatar/" +
			player.getImage() + "' />");
	$("div#player" + id + " .playerName").text(player.getName());
	$("div#player" + id + " .sum").text(player.getCash());
	
	$("#playerCards" + id).css("top", "" + cardCoord[id].top);
	$("#playerCards" + id).css("left", "" + cardCoord[id].left);
	
	$("#dealer" + id).css("top", "" + dealCoord[id].top);
	$("#dealer" + id).css("left", "" + dealCoord[id].left);
	
	$("#player_" + id + "_Bet").css("top", "" + betCoord[id].top);
	$("#player_" + id + "_Bet").css("left", "" + betCoord[id].left);
}

function updatePlayer(id, player) {
	$("div#player" + id + " .sum").text(player.getCash());
	
	if (!player.isInGame()) {
		$("#player" + id).css("opacity", "0.5");
		removeBet(id);
	} else {
		setBet(id, player.getBet());
	}
}

function activatePlayer(id) {
    $("#player" + id).addClass("playerActive");
}

function deactivatePlayer(id) {
    $("#player" + id).removeClass("playerActive");
}

function enableWinner(id) {
    $("#player" + id).addClass("playerWon");
}

function disableWinner(id) {
    $("#player" + id).removeClass("playerWon");
}

function markAI(id) {
    var top = parseInt($("#player" + id).css("top"))-5+"px";
    var left = parseInt($("#player" + id).css("left"))-20+"px";
    $("#gameTable").append("<img id=ai_"+id+" src='resources/ai.png'/>");
    $("#ai_" + id).css({"position":"absolute","top":top,"left":left,"width":"30px","height":"30px"});
}

function setDealerButton(id) {
    $("#dealer" + id).append("<img id='dealerButton' src='resources/dealer_button.png'/>");
}

function moveDealersButton(prev_id, id) {
    $("#dealerButton").appendTo("#gameTable");
    $("#dealerButton").css({"top": $("#dealer" + prev_id).css("top"),"left": $("#dealer" + prev_id).css("left"),"position":"absolute"});
    $("#dealerButton").animate({"top": $("#dealer" + id).css("top"),"left": $("#dealer" + id).css("left")},750,"linear",function(){
        $("#dealerButton").css("position","");
        $("#dealerButton").appendTo("#dealer" + id);
    });
}

function dealCard(id, image, cardPos) {
	$("#gameTable").append("<img id='card"+id+"_"+cardPos+"' class='resizeCards target' src='resources/cards/"+image+"'/>");
	$("#card"+id+"_" + cardPos).animate({"top": $("#playerCards"+id).css("top"),"left": $("#playerCards"+id).css("left")}, 100, "linear", function(){
		$("#card"+id+"_"+cardPos).removeClass("resizeCards");
		$("#card"+id+"_"+cardPos).addClass("resizePlayerCards");
		$("#card"+id+"_"+cardPos).removeClass("target");
		$("#card"+id+"_"+cardPos).appendTo("#playerCards"+id);
		$("#card"+id+"_"+cardPos).css("float","left");
	});
}

function burnCard() {
     $("#gameTable").append("<img id='burnedCard' class='resizeCards floptarget' src='resources/cards/B.png'/>");
     var top = parseInt($("#burnedCard").css("top"))-75+"px";
     $("#burnedCard").animate({"top": top ,"left":$("#burnedCard").css("left")},300,"linear",function(){
        $("#burnedCard").fadeOut(300,function(){
            $("#burnedCard").remove();
        });
     });
}

function showHand(id, card0, card1) {
    var temp = $("#card"+id+"_0").css("width");
    
    $("#card"+id+"_0").animate({"width":"0px"},200,"linear", function(){});
    $("#card"+id+"_1").animate({"width":"0px"},200,"linear", function(){});
    
    $("#card"+id+"_0").attr("src","resources/cards/"+card0);
    $("#card"+id+"_1").attr("src","resources/cards/"+card1);
    
    $("#card"+id+"_0").animate({"width":temp},200,"linear", function(){});
    $("#card"+id+"_1").animate({"width":temp},200,"linear", function(){});
}

function animateFlop(images) {
    if(images.length == 3){
        $("#gameTable").append("<img id='flop_1' class='resizeCards floptarget' src='resources/cards/"+images.pop()+"'/>");
        $("#flop_1").animate({"top": $("#card").css("top"),"left": $("#card").css("left")},500,"linear",function(){
            $("#flop_1").removeClass("floptarget");
            $("#flop_1").appendTo("#flop");
        });
        var left = parseInt($("#card").css("left"))+60+"px";
        $("#gameTable").append("<img id='flop_2' class='resizeCards floptarget' src='resources/cards/"+images.pop()+"'/>");
        $("#flop_2").animate({"top": $("#card").css("top"),"left": left},500,"linear",function(){
            $("#flop_2").removeClass("floptarget");
            $("#flop_2").appendTo("#flop");
        });
        left = parseInt($("#card").css("left"))+120+"px";
        $("#gameTable").append("<img id='flop_3' class='resizeCards floptarget' src='resources/cards/"+images.pop()+"'/>");
        $("#flop_3").animate({"top": $("#card").css("top"),"left": left},500,"linear",function(){
            $("#flop_3").removeClass("floptarget");
            $("#flop_3").appendTo("#flop");
        });
    }else{
        console.log("Wrong input for animateFlop()");
    }
}

function animateTurn(image) {    
    $("#gameTable").append("<img id='turn_c' class='resizeCards floptarget' src='resources/cards/"+image+"'/>");
    var left = parseInt($("#card").css("left"))+180+"px";
    $("#turn_c").animate({"top": $("#card").css("top"),"left": left},750,"linear",function(){
        $("#turn_c").removeClass("floptarget");
        $("#turn_c").appendTo("#turn");
    });
}

function animateRiver(image) {
    $("#gameTable").append("<img id='river_c' class='resizeCards floptarget' src='resources/cards/"+image+"'/>");   
    var left = parseInt($("#card").css("left"))+240+"px";
    $("#river_c").animate({"top": $("#card").css("top"),"left": left},1000,"linear",function(){
        $("#river_c").removeClass("floptarget");
        $("#river_c").appendTo("#river");
    });
}

function removeFTR() {
    $("#flop_1").fadeOut(1000,function(){
        $("#flop_1").remove();
    });
    $("#flop_2").fadeOut(1000,function(){
        $("#flop_2").remove();
    });
    $("#flop_3").fadeOut(1000,function(){
        $("#flop_3").remove();
    });
    $("#turn_c").fadeOut(1000,function(){
        $("#turn_c").remove();
    });
    $("#river_c").fadeOut(1000,function(){
        $("#river_c").remove();
    });
}

function retrieveCards(id) {
    $("#card"+id+"_0").appendTo("#gameTable").css({"top": $("#playerCards"+id).css("top"),"left": $("#playerCards"+id).css("left"),"position":"absolute"}).addClass("resizeCards").removeClass("resizePlayerCards");
    $("#card"+id+"_1").appendTo("#gameTable").css({"top": $("#playerCards"+id).css("top"),"left": $("#playerCards"+id).css("left"),"position":"absolute"}).addClass("resizeCards").removeClass("resizePlayerCards");
 
    $("#card"+id+"_0").animate({"top": $("#dealingSpot").css("top"),"left": $("#dealingSpot").css("left")}, 200, "linear", function(){
        $("#card"+id+"_0").remove();
    });
    $("#card"+id+"_1").animate({"top": $("#dealingSpot").css("top"),"left": $("#dealingSpot").css("left")}, 200, "linear", function(){
        $("#card"+id+"_1").remove();
    });
}

function setBet(id, sum) {
	$("#player_" + id + "_Bet").text(sum + "$");
}

function removeBet(id) {
	$("#player_" + id + "_Bet").text("");
}

function enableFold() {
	$("#buttonsContainer").append("<input class='button large red' " +
			"type='button' value='Fold' onclick='engine.fold()' />");
}

function enableCheck() {
	$("#buttonsContainer").append("<input class='button large orange' " +
			"type='button' value='Check' onclick='engine.check()' />");
}

function enableCall() {
	$("#buttonsContainer").append("<input class='button large orange' " +
			"type='button' value='Call' onclick='engine.call()' />");
}

function enableRaise() {
	$("#buttonsContainer").append("<input class='button large green' " +
			"type='button' value='Raise' onclick='engine.raise()' />");
}

function enableAllin() {
	$("#buttonsContainer").append("<input class='button large green' " +
			"type='button' value='All-in' onclick='engine.allin()' />");
}

function disableButtons() {
	$("#buttonsContainer").empty();
}

function setSB(value){
    $("#sb").text("SB: "+value+"$");
}
function setBB(value){
    $("#bb").text("BB: "+value+"$");
}
function setRaise(value){
    $("#raise").text("Raise: "+value+"$");
}
function setPot(value){
    $("#pot").text("Pot: "+value+"$");
}

function setupTable() {
	$("#gameTable").append(
			"<div id='card'>" +
				"<div id='flop'></div>" +
				"<div id='turn'></div>" +
				"<div id='river'></div>" +
			"</div>");
	$("#card").css("top", "250px").css("left", "350px");
	
	$("#gameTable").append(
			"<div id='potInfoHolder'>" +
				"<div id='potInfoBg'></div>" +
				"<div id='potInfo'>" +
					"<span id='sb'></span><br />" +
					"<span id='bb'></span><br />" +
					"<span id='raise'></span><br />" +
					"<span id='pot'></span><br />" +
				"</div>" +
			"</div>");
	
	$("#gameTable").append("<div id='dealingSpot' class='target'></div>");
}

function clearTable() {
	$("#gameTable").empty();
	disableButtons();
}